<template>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { getCurrentChatId } from '../utils/whatsappHandler';
import { URL_CONFIG } from '../utils/defines';

export default defineComponent({
  name: 'ChatButtons',
  props: {
    chatData: {
      type: Object as PropType<any>,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    // 打开订单页面
    const openOrderPage = () => {
      if (props.chatData && props.chatData.order_no) {
        window.open(`${URL_CONFIG.ERP_BASE_URL}/#/crm/crmorder?kw=${props.chatData.order_no}`, '_blank');
      }
    };
    
    // 设置提醒
    const setReminder = () => {
      const chatId = getCurrentChatId();
      if (!chatId) {
        alert('无法获取当前聊天ID');
        return;
      }
      
      // 实现设置提醒的逻辑
      emit('set-reminder', chatId);
    };
    
    // 切换状态选择器
    const toggleStatusSelector = () => {
      emit('toggle-status-selector');
    };
    
    // 切换翻译抽屉
    const toggleTranslateDrawer = () => {
      emit('toggle-translate-drawer');
    };
    
    return {
      openOrderPage,
      setReminder,
      toggleStatusSelector,
      toggleTranslateDrawer
    };
  }
});
</script>

<style scoped>
.kiki-button-container {
  display: flex;
  gap: 8px;
  padding: 8px;
  background-color: #f0f2f5;
  border-bottom: 1px solid #e0e0e0;
}

.kiki-button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #128c7e;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.kiki-button:hover {
  background-color: #0e7a6d;
}

.kiki-order-button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #00a884;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.kiki-order-button:hover {
  background-color: #008f70;
}
</style> 